<template>
	<view class="content">
		<view class="id-area">
			<view class="back"><</view>
			<view class="main">
				<image class="head-portrait" src="../../../static/images/account-default-img.png" mode=""></image>
				<view class="info">
					<view class="">158****8037</view>
					<view class="fz19 grey-BF">ID:888889999</view>
				</view>
				<image class="edit-1" src="../../../static/images/account-edit-icon.png" mode=""></image>
			</view>
		</view>
		<view class="list-area">
			<view class="list-item">
				<image class="list-icon" src="../../../static/images/account-phone.png" mode=""></image>
				<view class="name">我的账号</view>
				<view class="fz19 grey-BF transformOrigin050">158****8037</view>
				<image class="edit-2" src="../../../static/images/account-edit-icon-s.png" mode=""></image>
			</view>
			<view class="list-item">
				<image class="list-icon" src="../../../static/images/account-password.png" mode=""></image>
				<view class="name">修改密码</view>
				<view class="fz19 grey-BF transformOrigin050">XYT****2820</view>
				<image class="edit-2" src="../../../static/images/account-edit-icon-s.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		computed: {
			
		},
		methods: {
			
		},
		onShow() {
			
		},
		onLoad() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		color: #FFFFFF;
		min-height: 100vh;
	}
	.id-area{
		height: 258rpx;
		padding: 0 94rpx 40rpx 85rpx;
		padding-top: calc(20rpx + var(--status-bar-height));
		box-sizing: border-box;
		background-color: #202A33;
		position: relative;
		display: flex;
		align-items: flex-end;
		
		.back{
			width: 28rpx;
			height: 19rpx;
			position: absolute;
			left: 35rpx;
			top: calc(76rpx - 20rpx - var(--status-bar-height));
		}
		.main{
			width: 100%;
			height: 99rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// background-color: #007AFF;
			
			.head-portrait{
				width: 99rpx;
				height: 99rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 15rpx;
			}
			.info{
				flex: 1;
				font-size: 25rpx;
				line-height: 36rpx;
			}
			.edit-1{
				width: 23rpx;
				height: 25rpx;
			}
		}
	}

	.list-area{
		margin-top: 22rpx;
		background-color: #202A33;
		
		.list-item{
			width: 581rpx;
			height: 128rpx;
			margin: 0 auto;
			border-bottom: 2rpx solid #071724;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.list-icon{
				width: 29rpx;
				height: 29rpx;
				margin-right: 38rpx;
			}
			.name{
				flex: 1;
				font-size: 25rpx;
			}
			.edit-2{
				width: 14rpx;
				height: 13rpx;
			}
		}
	}
</style>
